<template>
  <div>
    <h1>有key和没key的区别</h1>
    <button @click="handleAdd">添加一项</button>
    <button @click="show = !show">切换</button>
    <ul v-if="show">
      <!-- diff策略2 - 同级兄弟元素 - 默认是按照下标 - 指定index就是默认的 -->
      <!-- key 唯一值 要用字符串或者数字 一般会指定id -->
      <li v-for="(item, index) in arr" :key="index">
        {{ item }} - {{ index }}
        <input type="text" />
      </li>
    </ul>
    <ul v-if="show">
      <!-- diff策略2 - 同级兄弟元素 - 默认是按照下标 - 指定index就是默认的 -->
      <!-- key 唯一值 要用字符串或者数字 一般会指定id -->
      <li v-for="(item, index) in arr" :key="item">
        {{ item }} - {{ index }}
        <input type="text" />
      </li>
    </ul>
    <div v-else>
      <p>123</p>
      <div>456</div>
    </div>
    <!-- 
      原本vdom
        {tag: ul, children: [li, li, li]}
      现在dom
        {tag: div, children: [p, div]}
     -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: true,
      arr: ["老大", "老二", "老三"],
    };
  },
  methods: {
    // 希望添加一项，在老二之前加一个”新来的“
    handleAdd() {
      // console.log(this);
      this.arr.splice(1, 0, "新来的");
      // ['老大', '新来的', '老二', '老三']
    },
  },
};
</script>

<style>
</style>